<template>
    <div class="order-all">
        <i-card>
            <order-search></order-search>
        </i-card>
         <custom-tabs :tabsNav="tabsNav">
            <template slot="tabs-con">
                <i-table 
                    border
                    :columns="columns">
                </i-table>
                <footer>
                    <div></div>
                    <i-page :total="40"  show-elevator show-sizer></i-page>
                </footer>
            </template>
        </custom-tabs>
    </div>
</template>
<script>
// custom components
import OrderSearch from './components/OrderSearch'
import CustomTabs from '@/admin/components/CustomTabs'

export default {
    name: 'order-all',
    data() {
        return {
            allData: [],
            columns: [
                {
                    type: 'selection',
                    width: 55,
                    align: 'center'
                },
                {
                    title: '商品名',
                    width: '40%',
                    key: 'productName'
                },
                {
                    title: '收货人',
                    key: 'receiver',
                    sortable: true
                },
                {
                    title: '单价/数量',
                    key: 'price-num',
                    sortable: true
                },
                {
                    title: '下单时间',
                    key: 'orderTime',
                    sortable: true
                },
                {
                    title: '订单状态',
                    key: 'status'
                },
                {
                    title: '付款金额',
                    key: 'paymentAmount',
                    sortable: true
                },
                {
                    title: '管理',
                    key: 'management',
                    align: 'center',
                    render: (h, params) => {
                        return (
                            <div>
                                <i-button size="small" type="error">
                                    <i-icon type="trash-a" size={14} />
                                </i-button>
                            </div>
                        )
                    }
                }
            ],
            tabsNav: [
                {
                    name: 'all',
                    label: '全部'
                },
                {
                    name: 'obligation',
                    label: '待付款'
                },
                {
                    name: 'toBeDelivered',
                    label: '待发货'
                },
                {
                    name: 'afterDelivery',
                    label: '已发货'
                },
                {
                    name: 'complete',
                    label: '已完成'
                },
                {
                    name: 'close',
                    label: '已关闭'
                },
                {
                    name: 'refund',
                    label: '退款中'
                }
            ]
        }
    },
    components: {
        OrderSearch,
        CustomTabs
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.order-tabs {
    margin-top: @gap;
}
footer {
    display: flex;
    justify-content: space-between;
    margin-top: @gap;
}
</style>


